<!--
 * @Author: chen qi
 * @Date: 2022-07-10 10:06:14
 * @LastEditors: chen qi
 * @LastEditTime: 2022-07-11 18:05:23
 * @Description:
-->
<template>
  <div
    id="context-menu"
    :style="{ left: axis.x + 'px', top:axis.y + 'px' }"
    @click.stop
    @mousedown.stop
  >
    <slot>
      <h3>图表配置</h3>
      <el-form
        :model="canvas"
        :rules="rules"
        ref="ruleForm"
        label-width="auto"
        class="demo-ruleForm"
      >
        <el-form-item
          label="宽度"
          prop='width'
        >
          <el-input-number
            :min='0'
            placeholder="请输入宽度"
            v-model="canvas.width"
            :controls='false'
          >
          </el-input-number>
        </el-form-item>
        <el-form-item
          label="高度"
          prop='height'
        >
          <el-input-number
            :min='0'
            placeholder="请输入高度"
            v-model="canvas.height"
            :controls='false'
          >
          </el-input-number>
        </el-form-item>
        <el-form-item
          label="x"
          prop='left'
        >
          <el-input-number
            :min='0'
            placeholder="请输入x"
            v-model="canvas.left"
            :controls='false'
          >
          </el-input-number>
        </el-form-item>
        <el-form-item
          label="y"
          prop='top'
        >
          <el-input-number
            :min='0'
            placeholder="请输入x"
            v-model="canvas.top"
            :controls='false'
          >
          </el-input-number>

        </el-form-item>
        <el-form-item
          label="z-index"
          prop='top'
        >
          <el-input-number
            :min='1'
            placeholder="请输入zIndex"
            v-model="canvas.zIndex"
            :controls='false'
          >
          </el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button
            type='warning'
            @click="save('ruleForm')"
            center
          >保存</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </slot>
  </div>
</template>

<script>
import commonMixin from '@/utils/mixin'
export default {
  name: 'contextMenu',
  mixins: [commonMixin],
  inject: ['chartInstance'],
  props: {
    axis: {
      type: Object,
      default: () => {
        return {
          x: null,
          y: null
        }
      }
    }
  },
  data() {
    return {
      rules: {
        width: [
          { required: true, message: '请输入宽度', trigger: 'blur' }
        ],
        height: [
          { required: true, message: '请输入高度', trigger: 'blur' }
        ],
        left: [
          { required: true, message: '请输入x', trigger: 'blur' }
        ],
        top: [
          { required: true, message: '请输入y', trigger: 'blur' }
        ]
      },
      canvas: {
        width: 0,
        height: 0,
        left: 0,
        top: 0,
        zIndex: 1
      }
    }
  },
  directives: {
  },
  mounted() {
    console.log(this.chartInstance)
  },
  methods: {
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.setStyle(this.chartInstance.$el, {
            width: this.canvas.width + 'px',
            height: this.canvas.height + 'px',
            left: this.canvas.left + 'px',
            top: this.canvas.top + 'px'
          })
          this.setStyle(this.chartInstance.$el, {
            zIndex: this.canvas.zIndex
          })
          this.$parent.$children[0] && this.$parent.$children[0].chart && this.$parent.$children[0].chart.resize()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  },
  watch: {
    axis(val) {
      const { width, height, left, top } = this.chartInstance.$el.getBoundingClientRect()
      this.canvas.width = width
      this.canvas.height = height
      this.canvas.left = left
      this.canvas.top = top
      this.canvas.zIndex = this.chartInstance.$el.style.zIndex
    }
  }
}
</script>

<style lang="less" scoped>
// 右键控制面板
#context-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  margin: 0;
  background: #fff;
  z-index: 99999999999;
  position: absolute;
  list-style-type: none;
  padding: 0 70px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}
</style>
